/* ===========================
x-form 表单 + 输入框组件样式
x-card 卡片模块
x-headline 标题模块
x-section 内容模块
x-step 步骤条
x-description 描述列表
x-table x-pager x-handlebar 表格操作
x-empty
=========================== */


/* --------- x-form 表单 START --------- */
.x-form {
    padding: 12px 0 0;

    /* --- left + right padding --- */
    &.s-pd {
        padding-left: 24px;
        padding-right: 24px;

        &-xs {
            padding-right: 30px;
        }
        &-sm {
            padding-right: 50px;
        }
        &-md {
            padding-right: 80px;
        }
        &-lg {
            padding-right: 110px;
        }
    }


    /* --- label 样式 --- */
    .form__label--wrap .el-form-item__label {
        line-height: 1.4;
    }
    .x-form__item .no-margin-b,
    .no-margin-b {
        margin-bottom: 0;
    }
    .x-form__item--half {
        width: 50%;
    }
    .x-form__label {
        margin: 2px 22px 2px 0;
    }
    .x-form__btn {
        min-width: 100px;
        margin: 0 6px 2px 0;
    }
    .x-form__btn--full {
        width: 100%;
        margin: 0 0 6px;
    }

    .x-form__subitem .el-form-item__content {
        width: 100%
    }
    .x-form__error--center .el-form-item__error {
        width: 100%;
        text-align: center;
    }
}


/* --- flex 布局 --- */
.x-form--flex {
    @include flex;
    @include flex-wrap;
    @include flex-col-t;

    & > .el-form-item {
        @include flex-1;
        min-width: 48%;
        max-width: 50%;
        padding-right: 12px;
    }

    .x-form__item--full {
        @include flex-1;
        -webkit-flex: 1;
        -moz-flex: 1;
        flex: 1;
        width: 100%;
        min-width: 98%;
        max-width: none;
        padding-right: 12px;
    }
}


/* --- 输入框等组件  --- */
.o-inp--full,
.o-btn--full,
.o-select--full,
.o-textarea--full .el-textarea__inner {
    width: 100%;
}
.o-inp-number--full {
    width: 100% !important;
    .el-input__inner {
        text-align: left;
    }
}

.o-inp-datetime--full {
    width: 100% !important;
}

.o-datetime-picker {
    .el-time-panel__content {
        &::before,
        &::after {
            top: 55%;
        }

    }
}
/* --------- x-form 表单 END --------- */



/* --------- x-card 卡片 START --------- */
.x-card {
    position: relative;
    overflow: hidden;
    margin: 16px 30px;
    border-radius: 6px;
    box-shadow: none !important;
    border: 1px solid $--border-color;
    background: $--white;

    &.no-margin-t {
        margin-top: 0;
    }

    .el-card__header,
    .x-card__header {
        position: relative;
        padding: 12px 24px;
        height: 50px;
        line-height: 26px;
        color: $--main-color;

        .header-title {
            color: $--cont-color;
            font-size: 15px;
            font-weight: 600;
            line-height: 26px;
            letter-spacing: 1px;
        }
        .header-title--center {
            text-align: center;
        }
        .header-left {
            position: absolute;
            top: 0;
            left: 16px;
            line-height: 48px;
        }
        .header-right {
            position: absolute;
            top: 0;
            right: 16px;
            line-height: 48px;
            // .header-right__btn {
            //     padding: 8px 18px;
            // }
        }
        .o-icon {
            color: $--type-info-dark;
            vertical-align: middle;
            cursor: pointer;
            &:hover {
                color: $--main-color;
            }
        }
        .o-icon__back {
            font-size: 14px;
        }
        .o-icon__close {
            font-size: 18px;
        }
    }
    .el-card__body,
    .x-card__body {
        padding: 16px;
    }
}
/* --------- x-card 卡片 END --------- */



/* --------- 标题模块 START --------- */

.x-headline {
    @include flex;
    @include flex-col-c;
    @include flex-row-between;
    margin: 24px 0 12px;

    &:first-child {
        margin-top: 0;
    }
    &.s-mg-sm {
        margin: 12px 0 6px;
    }

    .headline__title {
        @include flex-1;
        position: relative;
        padding: 0 12px;
        color: $--main-color;
        font-size: 15px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 1px;

        &:before {
            content: "";
            position: absolute;
            top: 15%;
            left: 2px;
            width: 3px;
            height: 70%;
            background: $--type-primary-dark;
        }

        &.s-sub {
            font-size: 14px;
            font-weight: 400;
        }

        &.no-line {
            padding: 0 2px;

            &:before {
                display: none;
            }
        }
    }

    .headline__handle {
        margin-left: 12px;
        text-align: right;
    }

    .o-btn,
    .o-link {
        height: 28px;
        padding: 0 12px;
        margin-left: 6px;
        font-size: 14px;
        line-height: 26px;
        letter-spacing: 1px;
    }

    .o-btn {
        font-size: 12px;
    }
    .o-link {
        padding: 0 12px;
    }
}
/* --------- 标题模块 END --------- */


/* --------- 内容模块 START --------- */
.x-section {
    position: relative;
    width: 100%;
    padding: 8px 40px;
}

/* --- 底部 --- */
.x-footer {
    margin: 36px 0 24px;
    text-align: center;

    &.s-left {
        text-align: left;
    }
    &.s-right {
        text-align: right;
    }

    %footer-btn {
        min-width: 140px;
        margin: 2px 6px;
        padding: 10px 18px;
    }
    .o-btn {
        @extend %footer-btn;

        display: inline-block;
        vertical-align: middle;
    }

    .o-btn--lg {
        @extend %footer-btn;

        display: inline-block;
        vertical-align: middle;
        min-width: 160px;
    }

    .o-btn--full {
        @extend %footer-btn;
        width: 100%;
        margin-bottom: 6px;
    }
}
/* --------- 内容模块 END --------- */


/* --------- x-setp 步骤条 START --------- */
.x-step {
    .el-step__head.is-process {
        color: $--type-primary;
        border-color: $--type-primary;

        .el-step__icon {
            color: #fff;
            background: $--type-primary;
        }
    }

    .el-step__title.is-process,
    .el-step__description.is-process {
        color: $--type-primary
    }

    .el-step__head.is-wait {
        color: $--type-info-disabled;
        border-color: $--type-info-disabled;
    }

    .el-step__head.is-finish {
        .el-step__line-inner {
            transition-delay: 0ms !important;
            border-width: 1px !important;
            width: 100% !important;
        }
    }

    .el-step__head.is-error .el-step__line-inner {
        border-color: $--type-info-disabled;
    }

    .el-step__line {
        background-color: $--type-info-light;
    }
}
/* --------- x-setp 步骤条 END --------- */



/* ---------x-tab 选项卡 START --------- */
.x-tabnav {
    padding: 0 5px;
    margin: 0 auto;
    text-align: center;
    .el-tabs__nav-wrap::after {
        display: none;
    }
    .el-tabs__item {
        // width: 120px;
        font-size: 14px;
        &.is-active {
            font-weight: 600;
        }
    }
}
/* ---------x-tab 选项卡 END --------- */



/* --------- description 描述列表 START --------- */
.x-description {
    position: relative;

    &.s-label--xs .row__label {
        width: 100px
    }
    &.s-label--sm .row__label {
        width: 120px
    }
    &.s-label--md .row__label {
        width: 140px
    }
    &.s-label--lg .row__label {
        width: 160px
    }

    &.margin-b--xs .x-description__row {
        margin-bottom: 6px;
    }
    &.margin-b--sm .x-description__row {
        margin-bottom: 12px;
    }
    &.margin-b--md .x-description__row {
        margin-bottom: 22px;
    }
    &.margin-b--lg .x-description__row {
        margin-bottom: 32px;
    }

    &.has-border {
        padding: 0;
        border: solid $--border-color;
        border-width: 1px 1px 0 1px;

        .x-description__row {
            padding: 0;
            margin: 0;
            border-bottom: 1px solid $--border-color;
            .row__label,
            .row__value {
                padding: 6px 12px;
            }
            .row__label + .row__value {
                border-left: 1px solid $--border-color;
            }
        }
    }

    /* 三列 */
    &.is-col-3 .x-description__row {
        @include flex-1;
        max-width: 33%;
        min-width: 33%;

        &.is-flex-2 {
            min-width: 66%;
            max-width: 66%;
        }
    }

    /* 四列 */
    &.is-col-4 .x-description__row {
        @include flex-1;
        max-width: 25%;
        min-width: 25%;

        &.is-flex-2 {
            min-width: 50%;
            max-width: 50%;
        }
    }

    /* 边界线 */
    &.has-divider {
        margin-bottom: 12px;
        border-bottom: 1px solid $--border-color;
    }
}
.x-description--flex {
    @extend .l-flex;
    @extend .l-flex-wrap;
}
.x-description__row {
    @extend .l-flex;
    max-width: 50%;
    min-width: 50%;
    margin-bottom: 12px;
    color: $--main-color;
    font-size: 0;
    line-height: 28px;

    &.is-full {
        width: 100% !important;
        min-width: 100% !important;
    }

    .row__label {
        width: 120px;
        padding: 4px 12px;
        color: $--cont-color;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        line-height: 20px;

        &.row__label--right {
            text-align: right;
        }
        &.row__label--light {
            font-weight: 400;
        }
    }
    .row__value {
        position: relative;
        @extend .l-flex-1;
        color: $--main-color;
        font-size: 14px;
        word-break: break-all;
        overflow: hidden;


        .value__inner {
            display: inline;
            width: 100%;
            padding-bottom: 5px;
            border-bottom: 1px solid $--border-color;
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 5px;
                bottom: 0;
                // width: 100%;
                height: 1px;
                background: $--border-color;
            }
        }
    }
}

.x-description__row--center {
    @extend .x-description__row;
    @include flex-col-c;
}
/* --------- description 描述列表 END --------- */


/* --------- 时间轴 START --------- */
.x-timeline {
    .el-timeline-item__tail {
        border-left-color: $--type-info-light;
    }
}
/* --------- 时间轴 END --------- */


/* --------- 表格 START --------- */
.x-table {
    /* --- 变量 --- */
    $table-default-bg: #fff;
    $table-stripe-bg: #fafafa;
    $table-header-bg: #f8f8f9;

    $table-border-color: #EBEEF5;



    /* --- 滚动条 --- */
    * {
        $bar-width: 17px;
        $bar-radius: 8px;
        $bar-shadow: 34px;

        &::-webkit-scrollbar {
            width: $bar-width;
            margin: 0 auto;
        }
        &::-webkit-scrollbar-track {
            // 外层轨道
            box-shadow: 0 0 $bar-shadow #f2f2f2 inset;
            border-radius: 0;
        }
        &::-webkit-scrollbar-thumb {
            // 拖动条
            box-shadow: 0 0 $bar-shadow #b4bbc5 inset;
            border-radius: $bar-radius;
            border: solid transparent;
            border-width: 2px 4px 2px 3px;

            &:hover {
                box-shadow: 0 0 $bar-shadow #909090 inset;
            }
        }
    }



    &.no-hover {
        tbody tr:hover > td {
            background-color: $table-default-bg !important;
        }
    }
    &.no-expand-icon .el-table__expand-icon {
        display: none;
    }

    thead {
        color: $--cont-color;
    }
    th.gutter {
        display: table-cell !important;
    }

    td {
        padding: 0;
    }


    /* --- 样式兼容 --- */
    .el-table__fixed {
        height: 100% !important;
    }

    .el-table__fixed-right {
        height: 100% !important;
    }

    .el-table__header-wrapper,
    .el-table__header,
    .el-table__footer-wrapper,
    .el-table__fixed-footer-wrapper {
        tr,
        th {
            background: $table-header-bg;
        }

        th,
        th.is-leaf {
            padding: 6px 0;
        }
    }

    .el-table__footer-wrapper tbody td,
    .el-table__fixed-footer-wrapper tbody td {
        .cell {
            background: $table-header-bg;
        }
    }

    .el-table--border th,
    .el-table__fixed-right-patch,
    .el-table__footer-wrapper tbody td,
    .el-table__header-wrapper tbody td {
        background: $table-header-bg;
    }

    // .el-table__body-wrapper.is-scrolling-right ~ .el-table__fixed-right{
    //     border-left: 1px solid $table-border-color;
    // }

    // .el-table__body-wrapper.is-scrolling-left ~ .el-table__fixed-left {
    //     border-right: 1px solid $table-border-color;
    // }


    .cell {
        padding: 2px 6px;
        line-height: 1.3;
        word-wrap: break-word;
        word-break: break-all;

        a.c-table-link {
            color: $--type-primary;
            text-decoration: underline;
        }

        .caret-wrapper {
            width: 6px;
        }

        .el-image {
            vertical-align: text-top;
        }
    }

    /* --- 下级嵌套 --- */
    .x-table__child {
        padding: 8px 6px;
        .el-tabs__header {
            margin-bottom: 0;
        }
    }

    /* --- 内容 --- */
    .cell__row {
        @include flex;
        width: 100%;
        color: $--main-color;
        margin: 2px 0;
    }
    .cell__label {
        padding-right: 2px;
        color: $--cont-color;
    }
    .cell__value {
        @include flex-1;
        word-break: break-all;
    }

    .cell--primary {
        color: $--type-primary;
        font-weight: 600;
    }


    /* --- 操作按钮 --- */
    .o-link {
        position: relative;
        display: inline-block;
        padding: 0 0;
        margin: 4px 4px !important;
        font-size: 14px;
        line-height: 1.4;
        cursor: pointer;

        &.is-block {
            display: block;
        }
        .o-link__icon {
            display: inline-block;
            padding-right: 2px;
            font-size: 14px;
            vertical-align: baseline;
        }

        &.is-underline:hover:after {
            display: none;
        }


        &.is-underline:hover .el-link--inner {
            padding-bottom: 1px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
        }


        @each $c-name, $color in (primary, $--type-primary), (success, $--type-success), (warning, $--type-warning), (danger, $--type-danger), (info, $--type-info) {
            &.is-underline.el-link--#{$c-name} .el-link--inner {
                border-bottom-color: $color
            }
        }
    }

    @each $c-name, $color in (primary, $--type-primary), (success, $--type-success), (warning, $--type-warning), (danger, $--type-danger), (info, $--type-info) {
        .o-link--#{$c-name} {
            color: mix(#666, $color, 10%);
            // color: $color;

            &:hover {
                color: rgba($color, .9);
            }
        }
    }
}


/* --- 筛选栏 --- */
.x-filter-bar {
    @include flex;
    @include flex-wrap;
    margin: 6px -10px;

    .filter__item {
        position: relative;
        padding: 4px 24px;
        color: $--cont-color;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;

        &:hover {
            color: $--type-primary;
        }
        &.is-active {
            color: $--type-primary;
            font-weight: 600;
        }

        &:after {
            position: absolute;
            top: 8px;
            bottom: 8px;
            right: -1px;
            content: "";
            line-height: 20px;
            text-align: center;
            border-right: 1px solid $--light-color;
        }

        &:last-child:after {
            display: none;
        }
    }


}

/* --- 表格操作栏 --- */
.x-handlebar {
    margin: 12px 0;
    .x-handlebar__btns {
        min-width: 20%;
        text-align: right;
    }

    .o-btn-group {
        margin: 2px 10px;
    }
    .o-btn {
        display: inline-block;
        padding: 0 18px;
        height: 28px;
        margin-left: 10px;
        font-size: 12px;
        line-height: 26px;
        vertical-align: middle;
        letter-spacing: 1px;
        border-radius: 4px;
    }
}


/* --- 表格分页 --- */
.x-pager {
    margin: 12px 0;
    text-align: right;

    &.x-pager--center {
        text-align: center;
    }
    .el-pagination {
        padding: 0;
    }
}
/* --------- 表格 END --------- */


/* --------- tree 树型组件 START --------- */
.x-tree {
    $lineColor: #f6f6f6;
    $borderColor: #dcdddd;

    .x-tree__list {
        line-height: 30px;

        &.has-bg {
            padding: 6px 6px 12px;
            background: rgba($--bg-color, .5);
        }

        &.has-border {
            padding: 6px 12px 12px;
            .el-tree-node {
                position: relative;
                padding-left: 16px;

                &:before,
                &:after {
                    content: "";
                    left: -4px;
                    position: absolute;
                    right: auto;
                    border-width: 1px;
                }

                &:before {
                    border-left: 1px dashed $borderColor;
                    bottom: 0px;
                    height: 100%;
                    top: 6px;
                    width: 2px;
                }

                &:after {
                    border-top: 1px dashed $borderColor;
                    height: 20px;
                    top: 12px;
                    width: 20px;
                }

                & :last-child:before {
                    // height: 38px;
                }
            }

            .el-tree-node__expand-icon.is-leaf {
                margin-top: 7px;

                &:before {
                    content: "";
                    height: 20px;
                    top: 17px;
                    width: 20px;
                    border-top: 1px dashed $borderColor;
                }
            }
        }
        .el-tree-node__content {
            height: auto;
        }

        .el-tree-node {
            position: relative;
        }

        .el-tree-node__children {
            padding-left: 16px;
        }

        .el-tree-node__expand-icon {
            color: $--cont-color;
            font-size: 14px;
        }

        .el-tree-node__expand-icon.is-leaf {
            position: relative;
        }

        // &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        //     background-color: $lineColor;
        // }

        .custom-tree-node {
            position: relative;
            width: 100%;
            font-size: 14px;
            padding-right: 170px;
            color: $--main-color;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .is-method {
            color: $--cont-color;
        }
    }
}

/* --------- tree 树型组件 END --------- */


/* --------- x-dialog START --------- */
.x-dialog.el-dialog__wrapper {
    // 是否展示头部
    &.has-header .el-dialog .el-dialog__header {
        display: none;
    }

    // 无标题
    &.no-headtitle .el-dialog .el-dialog__header {
        height: 40px;
        padding: 0 24px;
        line-height: 40px;
        border: none;

        .el-dialog__headerbtn {
            top: 0;
        }
    }

    // body 不限高度
    &.no-max-height {
        .el-dialog .el-dialog__body {
            max-height: none;
        }
    }

    .el-dialog {
        .el-dialog__header {
            height: 50px;
            padding: 12px 16px;
            border: 1px solid $--border-color;
            border-radius: 4px 4px 0 0;
            overflow: hidden;

            .el-dialog__title {
                display: block;
                padding-right: 16px;
                color: $--cont-color;
                font-size: 15px;
                font-weight: 700;
                line-height: 24px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .el-dialog__headerbtn {
                top: 7px;
                right: 0;
                padding: 8px 20px;
                line-height: 24px;
            }
        }

        .el-dialog__body {
            max-height: 84vh;
            overflow: auto;
            padding: 16px;

            .x-form {
                padding-top: 0;
            }
        }

        .el-dialog__footer {
            padding: 0;
            border-top: 1px solid $--border-color;
        }


    }

    .x-dialog__title {
        padding-right: 16px;
        color: $--cont-color;
        font-size: 15px;
        font-weight: 600;
        line-height: 24px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        .title__icon {
            height: 20px;
            margin-right: 6px;
            vertical-align: sub;
        }
    }

    .x-dialog__body {
        color: $--cont-color;
    }

    .x-dialog__footer {
        padding: 12px 18px;

        .o-btn {
            min-width: 80px;
            margin-left: 8px;
            // font-size: 14px;
            letter-spacing: 1px;

            &.o-btn--cancel {
                color: $--cont-color;
                border: 1px solid rgba($--type-info, .3);
                background: #fff;
                &:hover {
                    color: $--type-primary-dark;
                    border-color: $--type-primary-dark;
                    background: #fff;
                }
            }
            &.o-btn--submit {
                min-width: 120px;
            }
        }

    }

    &.s-md .el-dialog {
        width: 50%;
    }
    &.s-lg .el-dialog {
        width: 80%;
    }
}
/* --------- x-dialog END --------- */


/* --------- x-confirm START --------- */
.x-confirm {
    width: 380px;

    &.s-center {
        text-align: center;
    }

    .el-message-box__header {
        padding: 15px 15px 10px;

        .el-message-box__title {
            color: $--cont-color;
            font-size: 14px;
        }
    }

    .el-message-box__content {
        padding: 15px 20px;
        color: $--main-color;
    }

    .el-button--small,
    .el-button--small.is-round {
        padding: 7px 15px;
    }
}
/* --------- x-confirm END --------- */

/* --------- x-empty Start --------- */
.x-empty {
    width: 100%;
    padding: 20px 20px 30px;
    text-align: center;
    &.has-bg {
        background: #fff;
    }

    &--left {
        text-align: left;
    }
    &--right {
        text-align: right;
    }
    &.s-sm {
        padding: 12px 24px;
        .el-empty__image {
            width: 100px;
        }
        .el-empty__description {
            margin-top: 12px;
        }
    }
}
.x-empty--defined {
    width: 100%;
    padding: 20% 24px 5%;
    text-align: center;

    .defined__icon {
        display: block;
        margin: 0 auto;
        color: rgba($--light-color, .6);
        font-size: 120px;
    }
    .defined__txt {
        margin-top: 6px;
        font-size: 12px;
        color: $--light-color;

    }

    &.s-sm {
        padding: 12px 24px;
        .defined__icon {
            font-size: 60px;
        }
    }
}
/* --------- x-empty END --------- */


/* --------- x-backtop Start --------- */
.x-backtop {
    color: $--type-primary-dark;
    text-align: center;
    line-height: 40px;
    opacity: .8;
}
/* --------- x-backtop END --------- */


/* --------- x-scroll Start --------- */
.x-scroll {
    @include flex-v;
    width: 100%;
    height: 100%;

    .x-scroll__freeze {
        flex: 0 0 auto;
    }
    .x-scroll__roll {
        position: relative;
        @include flex-1;
        .roll__main {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            overflow-y: auto;
        }
    }
}

/* --------- x-scroll END --------- */